<template>
    <require from="./em-blog-left-sidebar.css"></require>
    <div ref="leftBarRef"
        class="ui left visible sidebar em-blog-left-sidebar ${isHide ? 'mobile-hide' : ''} ${folded ? 'bar-fold' : 'bar-unfold'}">
        <div class="tms-body">
            <div scrollbar="scrollbar-macosx">
                <div ref="treeRef" class="ui list space tms-sortable-elem-spaces">
                    <div class="item" style="padding-top: 0.214286em;">
                        <i click.delegate="spaceToggleHandler(spaceStow)"
                            class="angle ${spaceStow.open ? 'down' : 'right'} link icon"></i>
                        <div class="content">
                            <span style="cursor: pointer;" click.delegate="spaceToggleHandler(spaceStow)">
                                <i class="empty star icon" style="margin-right: 0; position: relative; left: -2px;"></i>
                                ${spaceStow.name}
                            </span>
                            <div show.bind="spaceStow.open" class="ui bulleted list">
                                <template repeat.for="item of blogStows | sort:'blog.title'">
                                    <div if.bind="item.blog.status != 'Deleted'" show.bind="!item._hidden"
                                        data-id="${item.blog.id}" data-pid="${item.blog.pid}"
                                        data-has-child="${item.blog.hasChild}"
                                        class="item blog-item ${item.blog.id == $parent.blog.id ? 'active' : ''}">
                                        <a title="${item.blog.title}" href="#/blog/${item.blog.id}">
                                            <i class="icons">
                                                <i class="file outline icon"></i>
                                                <i show.bind="item.blog.privated" class="corner lock icon"></i>
                                            </i>
                                            ${item.blog.title}</a>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="item" style="padding-top: 0.214286em;">
                        <i click.delegate="spaceToggleHandler(spaceRecentOpen)"
                            class="angle ${spaceRecentOpen.open ? 'down' : 'right'} link icon"></i>
                        <div class="content">
                            <span style="cursor: pointer;" click.delegate="spaceToggleHandler(spaceRecentOpen)">
                                <i class="unhide icon" style="margin-right: 0; position: relative; left: -2px;"></i>
                                ${spaceRecentOpen.name}
                            </span>
                            <div show.bind="spaceRecentOpen.open" class="ui bulleted list">
                                <template repeat.for="blog of blogs | hasProp:'_openTime' | sort:'_openTime':true | take:15 &
                                    signal:'sg-recent-open-refresh'">
                                    <div if.bind="blog.status != 'Deleted'" show.bind="!blog._hidden"
                                        data-id="${blog.id}" data-pid="${blog.pid}" data-has-child="${blog.hasChild}"
                                        class="item blog-item ${blog.id == $parent.blog.id ? 'active' : ''}">
                                        <a title="${blog.title}" href="#/blog/${blog.id}">
                                            <i class="icons">
                                                <i class="file outline icon"></i>
                                                <i show.bind="blog.privated" class="corner lock icon"></i>
                                            </i>
                                            ${blog.title}</a>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="item" style="padding-top: 0.214286em;">
                        <i click.delegate="spaceToggleHandler(spaceRecent)"
                            class="angle ${spaceRecent.open ? 'down' : 'right'} link icon"></i>
                        <div class="content">
                            <span style="cursor: pointer;" click.delegate="spaceToggleHandler(spaceRecent)">
                                <i class="history icon" style="margin-right: 0; position: relative; left: -2px;"></i>
                                ${spaceRecent.name}
                            </span>
                            <div show.bind="spaceRecent.open" class="ui bulleted list">
                                <template repeat.for="blog of blogs | sort:'updateDate':true | take:20 &
                                signal:'sg-recent-update-refresh'">
                                    <div if.bind="blog.status != 'Deleted'" show.bind="!blog._hidden"
                                        data-id="${blog.id}" data-pid="${blog.pid}" data-has-child="${blog.hasChild}"
                                        class="item blog-item ${blog.id == $parent.blog.id ? 'active' : ''}">
                                        <a title="${blog.title}" href="#/blog/${blog.id}">
                                            <i class="icons">
                                                <i class="file outline icon"></i>
                                                <i show.bind="blog.privated" class="corner lock icon"></i>
                                            </i>
                                            ${blog.title}</a>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <template repeat.for="space of spaces | sortBlog:'name'">
                        <div class="item space-item" data-id="${space.id}" data-sort="${space.sort}"
                            show.bind="!space._hidden">
                            <i click.delegate="spaceToggleHandler(space)"
                                class="angle ${space.open ? 'down' : 'right'} link icon"></i>
                            <div class="content">
                                <span style="cursor: pointer;" click.delegate="spaceToggleHandler(space)"
                                    title="${space.name}">
                                    <i class="icons">
                                        <!-- <i class="folder outline icon"></i> -->
                                        <i class="world icon"></i>
                                        <i show.bind="space.privated" class="corner lock icon"></i>
                                    </i>
                                    ${space.name}
                                </span>
                                <div class="dirs tms-sortable-elem-dirs" data-id="${space.id}">
                                    <template repeat.for="dir of space.dirs | sortBlog:'name'">
                                        <div class="list dir dir-item" data-id="${dir.id}" data-sort="${dir.sort}"
                                            data-space-id=${space.id} show.bind="space.open && !dir._hidden"
                                            if.bind="dir.status != 'Deleted'">
                                            <i click.delegate="dirToggleHandler(dir)"
                                                class="angle ${dir.open ? 'down' : 'right'} link icon"></i>
                                            <div class="content">
                                                <span style="cursor: pointer;" click.delegate="dirToggleHandler(dir)"
                                                    title="${dir.name}">
                                                    <i class="icons">
                                                        <i class="folder ${dir.open ? 'open' : ''} outline icon"
                                                            style="width: 13px;"></i>
                                                        <i show.bind="dir.privated" class="corner lock icon"></i>
                                                    </i>
                                                    ${dir.name}
                                                </span>
                                                <div show.bind="dir.open"
                                                    class="ui bulleted list tms-sortable-elem-blogs"
                                                    data-id="${space.id}" data-dir-id="${dir.id}"
                                                    style="padding-left: 0;">
                                                    <div repeat.for="item of dir.blogs | sortBlog" data-id="${item.id}"
                                                        data-pid="${item.pid}" data-has-child="${item.hasChild}"
                                                        data-space-id="${space.id}" data-dir-id="${dir.id}"
                                                        data-sort="${item.sort}" show.bind="!item._hidden"
                                                        class="item top blog-item ${item.id == blog.id ? 'active' : ''}">
                                                        <a title="${item.title}" href="#/blog/${item.id}">
                                                            <i class="icons" click.delegate="loadChildBlogs(item)">
                                                                <i if.bind="!item.hasChild"
                                                                    class="file outline icon"></i>
                                                                <i if.bind="item.hasChild"
                                                                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                <i show.bind="item.privated"
                                                                    class="corner lock icon"></i>
                                                            </i>
                                                            ${item.title}</a>
                                                        <div class="actions">
                                                            <div
                                                                ui-dropdown class="ui right pointing dropdown">
                                                                <i class="large ellipsis horizontal icon"></i>
                                                                <div class="left menu">
                                                                    <div class="item">
                                                                        <i class="dropdown icon"></i>
                                                                        <span class="text"
                                                                            click.delegate="createHandler(space, dir, item)">创建博文</span>
                                                                        <div class="menu">
                                                                            <div class="header">选择编辑器</div>
                                                                            <a class="item"
                                                                                click.delegate="createHtmlHandler(space, dir, item)">
                                                                                HTML
                                                                            </a>
                                                                            <a class="item"
                                                                                click.delegate="createHandler(space, dir, item)">
                                                                                Markdown
                                                                            </a>
                                                                            <!-- <a class="item"
                                                                                click.delegate="createExcelHandler(space, dir, item)">
                                                                                电子表格
                                                                            </a> -->
                                                                            <a class="item"
                                                                                click.delegate="createSheetHandler(space, dir, item)">
                                                                                电子表格
                                                                            </a>
                                                                            <a class="item"
                                                                                click.delegate="createMindHandler(space, dir, item)">
                                                                                思维导图
                                                                            </a>
                                                                            <div class="ui divider"></div>
                                                                            <a click.delegate="selectTplHandler(space, dir, item)"
                                                                                class="item">
                                                                                基于模板
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="item" style="color: red;"
                                                                        click.delegate="delBlogHandler(item)"><i
                                                                            class="trash outline icon"></i>删除博文</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div show.bind="item.hasChild && item._open"
                                                            class="ui bulleted list tms-sortable-elem-blogs"
                                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                            data-id="${space.id}" data-dir-id="${dir.id}">
                                                            <div repeat.for="child of item._childs | sortBlog"
                                                                data-id="${child.id}" data-sort="${child.sort}"
                                                                data-pid="${child.pid}"
                                                                data-has-child="${child.hasChild}"
                                                                show.bind="!child._hidden"
                                                                class="item child blog-item ${child.id == blog.id ? 'active' : ''}">
                                                                <a title="${child.title}" href="#/blog/${child.id}">
                                                                    <i class="icons"
                                                                        click.delegate="loadChildBlogs(child)">
                                                                        <i if.bind="!child.hasChild"
                                                                            class="file outline icon"></i>
                                                                        <i if.bind="child.hasChild"
                                                                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                        <i show.bind="child.privated"
                                                                            class="corner lock icon"></i>
                                                                    </i>${child.title}</a>
                                                                <div class="actions">
                                                                    <div
                                                                        ui-dropdown class="ui right pointing dropdown">
                                                                        <i class="large ellipsis horizontal icon"></i>
                                                                        <div class="left menu">
                                                                            <div class="item">
                                                                                <i class="dropdown icon"></i>
                                                                                <span class="text"
                                                                                    click.delegate="createHandler(space, dir, child)">创建博文</span>
                                                                                <div class="menu">
                                                                                    <div class="header">选择编辑器</div>
                                                                                    <a class="item"
                                                                                        click.delegate="createHtmlHandler(space, dir, child)">
                                                                                        HTML
                                                                                    </a>
                                                                                    <a class="item"
                                                                                        click.delegate="createHandler(space, dir, child)">
                                                                                        Markdown
                                                                                    </a>
                                                                                    <!-- <a class="item"
                                                                                        click.delegate="createExcelHandler(space, dir, child)">
                                                                                        电子表格
                                                                                    </a> -->
                                                                                    <a class="item"
                                                                                        click.delegate="createSheetHandler(space, dir, child)">
                                                                                        电子表格
                                                                                    </a>
                                                                                    <a class="item"
                                                                                        click.delegate="createMindHandler(space, dir, child)">
                                                                                        思维导图
                                                                                    </a>
                                                                                    <div class="ui divider"></div>
                                                                                    <a click.delegate="selectTplHandler(space, dir, child)"
                                                                                        class="item">
                                                                                        基于模板
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div class="item" style="color: red;"
                                                                                click.delegate="delBlogHandler(child)">
                                                                                <i class="trash outline icon"></i>删除博文
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div show.bind="child.hasChild && child._open"
                                                                    class="ui bulleted list tms-sortable-elem-blogs"
                                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                                    data-id="${space.id}" data-dir-id="${dir.id}">
                                                                    <div repeat.for="child2 of child._childs | sortBlog"
                                                                        data-id="${child2.id}" data-pid="${child2.pid}"
                                                                        data-has-child="${child2.hasChild}"
                                                                        data-sort="${child2.sort}"
                                                                        show.bind="!child2._hidden"
                                                                        class="item child2 blog-item ${child2.id == blog.id ? 'active' : ''}">
                                                                        <a title="${child2.title}"
                                                                            href="#/blog/${child2.id}">
                                                                            <i class="icons"
                                                                                click.delegate="loadChildBlogs(child2)">
                                                                                <i if.bind="!child2.hasChild"
                                                                                    class="file outline icon"></i>
                                                                                <i if.bind="child2.hasChild"
                                                                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                                <i show.bind="child2.privated"
                                                                                    class="corner lock icon"></i>
                                                                            </i>${child2.title}</a>
                                                                        <div class="actions">
                                                                            <div
                                                                                ui-dropdown
                                                                                class="ui right pointing dropdown">
                                                                                <i
                                                                                    class="large ellipsis horizontal icon"></i>
                                                                                <div class="left menu">
                                                                                    <div class="item">
                                                                                        <i class="dropdown icon"></i>
                                                                                        <span class="text"
                                                                                            click.delegate="createHandler(space, dir, child2)">创建博文</span>
                                                                                        <div class="menu">
                                                                                            <div class="header">选择编辑器
                                                                                            </div>
                                                                                            <a class="item"
                                                                                                click.delegate="createHtmlHandler(space, dir, child2)">
                                                                                                HTML
                                                                                            </a>
                                                                                            <a class="item"
                                                                                                click.delegate="createHandler(space, dir, child2)">
                                                                                                Markdown
                                                                                            </a>
                                                                                            <!-- <a class="item"
                                                                                                click.delegate="createExcelHandler(space, dir, child2)">
                                                                                                电子表格
                                                                                            </a> -->
                                                                                            <a class="item"
                                                                                                click.delegate="createSheetHandler(space, dir, child2)">
                                                                                                电子表格
                                                                                            </a>
                                                                                            <a class="item"
                                                                                                click.delegate="createMindHandler(space, dir, child2)">
                                                                                                思维导图
                                                                                            </a>
                                                                                            <div class="ui divider">
                                                                                            </div>
                                                                                            <a click.delegate="selectTplHandler(space, dir, child2)"
                                                                                                class="item">
                                                                                                基于模板
                                                                                            </a>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="item"
                                                                                        style="color: red;"
                                                                                        click.delegate="delBlogHandler(child2)">
                                                                                        <i
                                                                                            class="trash outline icon"></i>删除博文
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div show.bind="child2.hasChild && child2._open"
                                                                            class="ui bulleted list tms-sortable-elem-blogs"
                                                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                                            data-id="${space.id}"
                                                                            data-dir-id="${dir.id}">
                                                                            <div repeat.for="child3 of child2._childs | sortBlog"
                                                                                data-id="${child3.id}"
                                                                                data-pid="${child3.pid}"
                                                                                data-has-child="${child3.hasChild}"
                                                                                data-sort="${child3.sort}"
                                                                                show.bind="!child3._hidden"
                                                                                class="item child3 blog-item ${child3.id == blog.id ? 'active' : ''}">
                                                                                <a title="${child3.title}"
                                                                                    href="#/blog/${child3.id}">
                                                                                    <i class="icons"
                                                                                        click.delegate="loadChildBlogs(child3)">
                                                                                        <i if.bind="!child3.hasChild"
                                                                                            class="file outline icon"></i>
                                                                                        <i if.bind="child3.hasChild"
                                                                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                                        <i show.bind="child3.privated"
                                                                                            class="corner lock icon"></i>
                                                                                    </i>${child3.title}</a>
                                                                                <div class="actions">
                                                                                    <div
                                                                                        ui-dropdown
                                                                                        class="ui right pointing dropdown">
                                                                                        <i
                                                                                            class="large ellipsis horizontal icon"></i>
                                                                                        <div class="left menu">
                                                                                            <div class="item">
                                                                                                <i
                                                                                                    class="dropdown icon"></i>
                                                                                                <span class="text"
                                                                                                    click.delegate="createHandler(space, dir, child3)">创建博文</span>
                                                                                                <div class="menu">
                                                                                                    <div class="header">
                                                                                                        选择编辑器
                                                                                                    </div>
                                                                                                    <a class="item"
                                                                                                        click.delegate="createHtmlHandler(space, dir, child3)">
                                                                                                        HTML
                                                                                                    </a>
                                                                                                    <a class="item"
                                                                                                        click.delegate="createHandler(space, dir, child3)">
                                                                                                        Markdown
                                                                                                    </a>
                                                                                                    <!-- <a class="item"
                                                                                                        click.delegate="createExcelHandler(space, dir, child3)">
                                                                                                        电子表格
                                                                                                    </a> -->
                                                                                                    <a class="item"
                                                                                                        click.delegate="createSheetHandler(space, dir, child3)">
                                                                                                        电子表格
                                                                                                    </a>
                                                                                                    <a class="item"
                                                                                                        click.delegate="createMindHandler(space, dir, child3)">
                                                                                                        思维导图
                                                                                                    </a>
                                                                                                    <div
                                                                                                        class="ui divider">
                                                                                                    </div>
                                                                                                    <a click.delegate="selectTplHandler(space, dir, child3)"
                                                                                                        class="item">
                                                                                                        基于模板
                                                                                                    </a>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="item"
                                                                                                style="color: red;"
                                                                                                click.delegate="delBlogHandler(child3)">
                                                                                                <i
                                                                                                    class="trash outline icon"></i>删除博文
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div show.bind="child3.hasChild && child3._open"
                                                                                    class="ui bulleted list tms-sortable-elem-blogs"
                                                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                                                    data-id="${space.id}"
                                                                                    data-dir-id="${dir.id}">
                                                                                    <div repeat.for="child4 of child3._childs | sortBlog"
                                                                                        data-id="${child4.id}"
                                                                                        data-pid="${child4.pid}"
                                                                                        data-has-child="${child4.hasChild}"
                                                                                        data-sort="${child4.sort}"
                                                                                        show.bind="!child4._hidden"
                                                                                        class="item child4 blog-item ${child4.id == blog.id ? 'active' : ''}">
                                                                                        <a title="${child4.title}"
                                                                                            href="#/blog/${child4.id}">
                                                                                            <i class="icons">
                                                                                                <i
                                                                                                    class="file outline icon"></i>
                                                                                                <i show.bind="child4.privated"
                                                                                                    class="corner lock icon"></i>
                                                                                            </i>${child4.title}</a>
                                                                                        <div class="actions">
                                                                                            <div if.bind="isSuper || child4.creator.username == loginUser.username"
                                                                                                ui-dropdown
                                                                                                class="ui right pointing dropdown">
                                                                                                <i
                                                                                                    class="large ellipsis horizontal icon"></i>
                                                                                                <div class="left menu">
                                                                                                    <div class="item"
                                                                                                        style="color: red;"
                                                                                                        click.delegate="delBlogHandler(child4)">
                                                                                                        <i
                                                                                                            class="trash outline icon"></i>删除博文
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="actions">
                                                <div
                                                    ui-dropdown class="ui right pointing dropdown">
                                                    <i class="large ellipsis horizontal icon"></i>
                                                    <div class="left menu">
                                                        <div class="item">
                                                            <i class="dropdown icon"></i>
                                                            <span class="text"
                                                                click.delegate="createHandler(space, dir)">创建博文</span>
                                                            <div class="menu">
                                                                <div class="header">选择编辑器</div>
                                                                <a class="item"
                                                                    click.delegate="createHtmlHandler(space, dir)">
                                                                    HTML
                                                                </a>
                                                                <a class="item"
                                                                    click.delegate="createHandler(space, dir)">
                                                                    Markdown
                                                                </a>
                                                                <!-- <a class="item"
                                                                    click.delegate="createExcelHandler(space, dir)">
                                                                    电子表格
                                                                </a> -->
                                                                <a class="item"
                                                                    click.delegate="createSheetHandler(space, dir)">
                                                                    电子表格
                                                                </a>
                                                                <a class="item"
                                                                    click.delegate="createMindHandler(space, dir)">
                                                                    思维导图
                                                                </a>
                                                                <div class="ui divider"></div>
                                                                <a click.delegate="selectTplHandler(space, dir)"
                                                                    class="item">
                                                                    基于模板
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="item" click.delegate="editDirHandler(dir, space)"><i
                                                                class="icon edit"></i>编辑分类</div>
                                                        <!-- <div class="item" click.delegate="authSpaceHandler(space)"><i class="lock icon"></i>限制</div> -->
                                                        <!-- <div class="divider"></div> -->
                                                        <div class="item" style="color: red;"
                                                            click.delegate="delDirHandler(dir, space)"><i
                                                                class="trash outline icon"></i>删除分类</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                <div show.bind="space.open" class="ui bulleted list tms-sortable-elem-blogs"
                                    data-id="${space.id}">
                                    <div repeat.for="item of space.blogs | sortBlog" data-id="${item.id}"
                                        data-pid="${item.pid}" data-has-child="${item.hasChild}" data-space-id=""
                                        data-dir-id="" data-sort="${item.sort}" show.bind="!item._hidden"
                                        class="item top blog-item ${item.id == blog.id ? 'active' : ''}">
                                        <a title="${item.title}" href="#/blog/${item.id}">
                                            <i class="icons" click.delegate="loadChildBlogs(item)">
                                                <i if.bind="!item.hasChild" class="file outline icon"></i>
                                                <i if.bind="item.hasChild"
                                                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                                                <i show.bind="item.privated" class="corner lock icon"></i>
                                            </i>
                                            ${item.title}</a>
                                        <div class="actions">
                                            <div
                                                ui-dropdown class="ui right pointing dropdown">
                                                <i class="large ellipsis horizontal icon"></i>
                                                <div class="left menu">
                                                    <div class="item">
                                                        <i class="dropdown icon"></i>
                                                        <span class="text"
                                                            click.delegate="createHandler(space, dir, item)">创建博文</span>
                                                        <div class="menu">
                                                            <div class="header">选择编辑器</div>
                                                            <a class="item"
                                                                click.delegate="createHtmlHandler(space, dir, item)">
                                                                HTML
                                                            </a>
                                                            <a class="item"
                                                                click.delegate="createHandler(space, dir, item)">
                                                                Markdown
                                                            </a>
                                                            <!-- <a class="item"
                                                                click.delegate="createExcelHandler(space, dir, item)">
                                                                电子表格
                                                            </a> -->
                                                            <a class="item"
                                                                click.delegate="createSheetHandler(space, dir, item)">
                                                                电子表格
                                                            </a>
                                                            <a class="item"
                                                                click.delegate="createMindHandler(space, dir, item)">
                                                                思维导图
                                                            </a>
                                                            <div class="ui divider"></div>
                                                            <a click.delegate="selectTplHandler(space, dir, item)"
                                                                class="item">
                                                                基于模板
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="item" style="color: red;"
                                                        click.delegate="delBlogHandler(item)"><i
                                                            class="trash outline icon"></i>删除博文</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div show.bind="item.hasChild && item._open"
                                            class="ui bulleted list tms-sortable-elem-blogs"
                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                            data-id="${space.id}">
                                            <div repeat.for="child of item._childs | sortBlog" data-id="${child.id}"
                                                data-pid="${child.pid}" data-has-child="${child.hasChild}"
                                                data-sort="${child.sort}" show.bind="!child._hidden"
                                                class="item child blog-item ${child.id == blog.id ? 'active' : ''}">
                                                <a title="${child.title}" href="#/blog/${child.id}">
                                                    <i class="icons" click.delegate="loadChildBlogs(child)">
                                                        <i if.bind="!child.hasChild" class="file outline icon"></i>
                                                        <i if.bind="child.hasChild"
                                                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
                                                        <i show.bind="child.privated" class="corner lock icon"></i>
                                                    </i>${child.title}</a>
                                                <div class="actions">
                                                    <div
                                                        ui-dropdown class="ui right pointing dropdown">
                                                        <i class="large ellipsis horizontal icon"></i>
                                                        <div class="left menu">
                                                            <div class="item">
                                                                <i class="dropdown icon"></i>
                                                                <span class="text"
                                                                    click.delegate="createHandler(space, dir, child)">创建博文</span>
                                                                <div class="menu">
                                                                    <div class="header">选择编辑器</div>
                                                                    <a class="item"
                                                                        click.delegate="createHtmlHandler(space, dir, child)">
                                                                        HTML
                                                                    </a>
                                                                    <a class="item"
                                                                        click.delegate="createHandler(space, dir, child)">
                                                                        Markdown
                                                                    </a>
                                                                    <!-- <a class="item"
                                                                        click.delegate="createExcelHandler(space, dir, child)">
                                                                        电子表格
                                                                    </a> -->
                                                                    <a class="item"
                                                                        click.delegate="createSheetHandler(space, dir, child)">
                                                                        电子表格
                                                                    </a>
                                                                    <a class="item"
                                                                        click.delegate="createMindHandler(space, dir, child)">
                                                                        思维导图
                                                                    </a>
                                                                    <div class="ui divider"></div>
                                                                    <a click.delegate="selectTplHandler(space, dir, child)"
                                                                        class="item">
                                                                        基于模板
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="item" style="color: red;"
                                                                click.delegate="delBlogHandler(child)">
                                                                <i class="trash outline icon"></i>删除博文
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div show.bind="child.hasChild && child._open"
                                                    class="ui bulleted list tms-sortable-elem-blogs"
                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                    data-id="${space.id}">
                                                    <div repeat.for="child2 of child._childs | sortBlog"
                                                        data-id="${child2.id}" data-sort="${child2.sort}"
                                                        data-pid="${child2.pid}" data-has-child="${child2.hasChild}"
                                                        show.bind="!child2._hidden"
                                                        class="item child2 blog-item ${child2.id == blog.id ? 'active' : ''}">
                                                        <a title="${child2.title}" href="#/blog/${child2.id}">
                                                            <i class="icons" click.delegate="loadChildBlogs(child2)">
                                                                <i if.bind="!child2.hasChild"
                                                                    class="file outline icon"></i>
                                                                <i if.bind="child2.hasChild"
                                                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                <i show.bind="child2.privated"
                                                                    class="corner lock icon"></i>
                                                            </i>${child2.title}</a>
                                                        <div class="actions">
                                                            <div
                                                                ui-dropdown class="ui right pointing dropdown">
                                                                <i class="large ellipsis horizontal icon"></i>
                                                                <div class="left menu">
                                                                    <div class="item">
                                                                        <i class="dropdown icon"></i>
                                                                        <span class="text"
                                                                            click.delegate="createHandler(space, dir, child2)">创建博文</span>
                                                                        <div class="menu">
                                                                            <div class="header">选择编辑器
                                                                            </div>
                                                                            <a class="item"
                                                                                click.delegate="createHtmlHandler(space, dir, child2)">
                                                                                HTML
                                                                            </a>
                                                                            <a class="item"
                                                                                click.delegate="createHandler(space, dir, child2)">
                                                                                Markdown
                                                                            </a>
                                                                            <!-- <a class="item"
                                                                                click.delegate="createExcelHandler(space, dir, child2)">
                                                                                电子表格
                                                                            </a> -->
                                                                            <a class="item"
                                                                                click.delegate="createSheetHandler(space, dir, child2)">
                                                                                电子表格
                                                                            </a>
                                                                            <a class="item"
                                                                                click.delegate="createMindHandler(space, dir, child2)">
                                                                                思维导图
                                                                            </a>
                                                                            <div class="ui divider">
                                                                            </div>
                                                                            <a click.delegate="selectTplHandler(space, dir, child2)"
                                                                                class="item">
                                                                                基于模板
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="item" style="color: red;"
                                                                        click.delegate="delBlogHandler(child2)">
                                                                        <i class="trash outline icon"></i>删除博文
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div show.bind="child2.hasChild && child2._open"
                                                            class="ui bulleted list tms-sortable-elem-blogs"
                                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                            data-id="${space.id}" data-dir-id="${dir.id}">
                                                            <div repeat.for="child3 of child2._childs | sortBlog"
                                                                data-id="${child3.id}" data-pid="${child3.pid}"
                                                                data-has-child="${child3.hasChild}"
                                                                data-sort="${child3.sort}" show.bind="!child3._hidden"
                                                                class="item child3 blog-item ${child3.id == blog.id ? 'active' : ''}">
                                                                <a title="${child3.title}" href="#/blog/${child3.id}">
                                                                    <i class="icons"
                                                                        click.delegate="loadChildBlogs(child3)">
                                                                        <i if.bind="!child3.hasChild"
                                                                            class="file outline icon"></i>
                                                                        <i if.bind="child3.hasChild"
                                                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
                                                                        <i show.bind="child3.privated"
                                                                            class="corner lock icon"></i>
                                                                    </i>${child3.title}</a>
                                                                <div class="actions">
                                                                    <div
                                                                        ui-dropdown class="ui right pointing dropdown">
                                                                        <i class="large ellipsis horizontal icon"></i>
                                                                        <div class="left menu">
                                                                            <div class="item">
                                                                                <i class="dropdown icon"></i>
                                                                                <span class="text"
                                                                                    click.delegate="createHandler(space, dir, child3)">创建博文</span>
                                                                                <div class="menu">
                                                                                    <div class="header">
                                                                                        选择编辑器
                                                                                    </div>
                                                                                    <a class="item"
                                                                                        click.delegate="createHtmlHandler(space, dir, child3)">
                                                                                        HTML
                                                                                    </a>
                                                                                    <a class="item"
                                                                                        click.delegate="createHandler(space, dir, child3)">
                                                                                        Markdown
                                                                                    </a>
                                                                                    <!-- <a class="item"
                                                                                        click.delegate="createExcelHandler(space, dir, child3)">
                                                                                        电子表格
                                                                                    </a> -->
                                                                                    <a class="item"
                                                                                        click.delegate="createSheetHandler(space, dir, child3)">
                                                                                        电子表格
                                                                                    </a>
                                                                                    <a class="item"
                                                                                        click.delegate="createMindHandler(space, dir, child3)">
                                                                                        思维导图
                                                                                    </a>
                                                                                    <div class="ui divider">
                                                                                    </div>
                                                                                    <a click.delegate="selectTplHandler(space, dir, child3)"
                                                                                        class="item">
                                                                                        基于模板
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div class="item" style="color: red;"
                                                                                click.delegate="delBlogHandler(child3)">
                                                                                <i class="trash outline icon"></i>删除博文
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div show.bind="child3.hasChild && child3._open"
                                                                    class="ui bulleted list tms-sortable-elem-blogs"
                                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                                    data-id="${space.id}" data-dir-id="${dir.id}">
                                                                    <div repeat.for="child4 of child3._childs | sortBlog"
                                                                        data-id="${child4.id}" data-pid="${child4.pid}"
                                                                        data-has-child="${child4.hasChild}"
                                                                        data-sort="${child4.sort}"
                                                                        show.bind="!child4._hidden"
                                                                        class="item child4 blog-item ${child4.id == blog.id ? 'active' : ''}">
                                                                        <a title="${child4.title}"
                                                                            href="#/blog/${child4.id}">
                                                                            <i class="icons">
                                                                                <i class="file outline icon"></i>
                                                                                <i show.bind="child4.privated"
                                                                                    class="corner lock icon"></i>
                                                                            </i>${child4.title}</a>
                                                                        <div class="actions">
                                                                            <div if.bind="isSuper || child4.creator.username == loginUser.username"
                                                                                ui-dropdown
                                                                                class="ui right pointing dropdown">
                                                                                <i
                                                                                    class="large ellipsis horizontal icon"></i>
                                                                                <div class="left menu">
                                                                                    <div class="item"
                                                                                        style="color: red;"
                                                                                        click.delegate="delBlogHandler(child4)">
                                                                                        <i
                                                                                            class="trash outline icon"></i>删除博文
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="actions">
                                <div ui-dropdown
                                    class="ui right pointing dropdown">
                                    <i class="large ellipsis horizontal icon"></i>
                                    <div class="left menu">
                                        <div class="item">
                                            <i class="dropdown icon"></i>
                                            <span class="text" click.delegate="createHandler(space)">创建博文</span>
                                            <div class="menu">
                                                <div class="header">选择编辑器</div>
                                                <a class="item" click.delegate="createHtmlHandler(space)">
                                                    HTML
                                                </a>
                                                <a class="item" click.delegate="createHandler(space)">
                                                    Markdown
                                                </a>
                                                <!-- <a class="item" click.delegate="createExcelHandler(space)">
                                                    电子表格
                                                </a> -->
                                                <a class="item" click.delegate="createSheetHandler(space)">
                                                    电子表格
                                                </a>
                                                <a class="item" click.delegate="createMindHandler(space)">
                                                    思维导图
                                                </a>
                                                <div class="ui divider"></div>
                                                <a click.delegate="selectTplHandler(space)" class="item">
                                                    基于模板
                                                </a>
                                            </div>
                                        </div>
                                        <div class="item" click.delegate="createDirHandler(space)"><i
                                                class="icon folder outline"></i>创建分类</div>
                                        <div class="item" click.delegate="updateChannelHandler(space)"><i
                                                class="icon hashtag"></i>关联频道</div>
                                        <div class="item" click.delegate="editSpaceHandler(space)"><i
                                                class="icon edit"></i>编辑空间</div>
                                        <div class="item" click.delegate="authSpaceHandler(space)"><i
                                                class="lock icon"></i>限制空间</div>
                                        <!-- <div class="divider"></div> -->
                                        <div class="item" style="color: red;" click.delegate="delSpaceHandler(space)"><i
                                                class="trash outline icon"></i>删除空间</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="ui bulleted list no-space tms-sortable-elem-blogs" data-id="">
                    <div repeat.for="item of noSpaceBlogs | sortBlog" data-id="${item.id}" data-sort="${item.sort}"
                        data-pid="${item.pid}" data-has-child="${item.hasChild}" show.bind="!item._hidden"
                        class="item top blog-item ${item.id == blog.id ? 'active' : ''}">
                        <a title="${item.title}" href="#/blog/${item.id}">
                            <i class="icons" click.delegate="loadChildBlogs(item)">
                                <i if.bind="!item.hasChild" class="file outline icon"></i>
                                <i if.bind="item.hasChild"
                                    class="${item._open ? 'minus' : 'plus'} square outline icon"></i>
                                <i show.bind="item.privated" class="corner lock icon"></i>
                            </i>${item.title}</a>
                        <div class="actions">
                            <div ui-dropdown
                                class="ui right pointing dropdown">
                                <i class="large ellipsis horizontal icon"></i>
                                <div class="left menu">
                                    <div class="item">
                                        <i class="dropdown icon"></i>
                                        <span class="text" click.delegate="createHandler(space, dir, item)">创建博文</span>
                                        <div class="menu">
                                            <div class="header">选择编辑器</div>
                                            <a class="item" click.delegate="createHtmlHandler(space, dir, item)">
                                                HTML
                                            </a>
                                            <a class="item" click.delegate="createHandler(space, dir, item)">
                                                Markdown
                                            </a>
                                            <!-- <a class="item" click.delegate="createExcelHandler(space, dir, item)">
                                                电子表格
                                            </a> -->
                                            <a class="item" click.delegate="createSheetHandler(space, dir, item)">
                                                电子表格
                                            </a>
                                            <a class="item" click.delegate="createMindHandler(space, dir, item)">
                                                思维导图
                                            </a>
                                            <div class="ui divider"></div>
                                            <a click.delegate="selectTplHandler(space, dir, item)" class="item">
                                                基于模板
                                            </a>
                                        </div>
                                    </div>
                                    <div class="item" style="color: red;" click.delegate="delBlogHandler(item)"><i
                                            class="trash outline icon"></i>删除博文</div>
                                </div>
                            </div>
                        </div>
                        <div show.bind="item.hasChild && item._open" class="ui bulleted list tms-sortable-elem-blogs"
                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;" data-id="">
                            <div repeat.for="child of item._childs | sortBlog" data-id="${child.id}"
                                data-pid="${child.pid}" data-has-child="${child.hasChild}" data-sort="${child.sort}"
                                show.bind="!child._hidden"
                                class="item child blog-item ${child.id == blog.id ? 'active' : ''}">
                                <a title="${child.title}" href="#/blog/${child.id}">
                                    <i class="icons" click.delegate="loadChildBlogs(child)">
                                        <i if.bind="!child.hasChild" class="file outline icon"></i>
                                        <i if.bind="child.hasChild"
                                            class="${child._open ? 'minus' : 'plus'} square outline icon"></i>
                                        <i show.bind="child.privated" class="corner lock icon"></i>
                                    </i>${child.title}</a>
                                <div class="actions">
                                    <div ui-dropdown
                                        class="ui right pointing dropdown">
                                        <i class="large ellipsis horizontal icon"></i>
                                        <div class="left menu">
                                            <div class="item">
                                                <i class="dropdown icon"></i>
                                                <span class="text"
                                                    click.delegate="createHandler(space, dir, child)">创建博文</span>
                                                <div class="menu">
                                                    <div class="header">选择编辑器</div>
                                                    <a class="item"
                                                        click.delegate="createHtmlHandler(space, dir, child)">
                                                        HTML
                                                    </a>
                                                    <a class="item" click.delegate="createHandler(space, dir, child)">
                                                        Markdown
                                                    </a>
                                                    <!-- <a class="item"
                                                        click.delegate="createExcelHandler(space, dir, child)">
                                                        电子表格
                                                    </a> -->
                                                    <a class="item"
                                                        click.delegate="createSheetHandler(space, dir, child)">
                                                        电子表格
                                                    </a>
                                                    <a class="item"
                                                        click.delegate="createMindHandler(space, dir, child)">
                                                        思维导图
                                                    </a>
                                                    <div class="ui divider"></div>
                                                    <a click.delegate="selectTplHandler(space, dir, child)"
                                                        class="item">
                                                        基于模板
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="item" style="color: red;"
                                                click.delegate="delBlogHandler(child)">
                                                <i class="trash outline icon"></i>删除博文</div>
                                        </div>
                                    </div>
                                </div>
                                <div show.bind="child.hasChild && child._open"
                                    class="ui bulleted list tms-sortable-elem-blogs"
                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;" data-id="">
                                    <div repeat.for="child2 of child._childs | sortBlog" data-id="${child2.id}"
                                        data-pid="${child2.pid}" data-has-child="${child2.hasChild}"
                                        data-sort="${child2.sort}" show.bind="!child2._hidden"
                                        class="item child2 blog-item ${child2.id == blog.id ? 'active' : ''}">
                                        <a title="${child2.title}" href="#/blog/${child2.id}">
                                            <i class="icons" click.delegate="loadChildBlogs(child2)">
                                                <i if.bind="!child2.hasChild" class="file outline icon"></i>
                                                <i if.bind="child2.hasChild"
                                                    class="${child2._open ? 'minus' : 'plus'} square outline icon"></i>
                                                <i show.bind="child2.privated" class="corner lock icon"></i>
                                            </i>${child2.title}</a>
                                        <div class="actions">
                                            <div
                                                ui-dropdown class="ui right pointing dropdown">
                                                <i class="large ellipsis horizontal icon"></i>
                                                <div class="left menu">
                                                    <div class="item">
                                                        <i class="dropdown icon"></i>
                                                        <span class="text"
                                                            click.delegate="createHandler(space, dir, child2)">创建博文</span>
                                                        <div class="menu">
                                                            <div class="header">选择编辑器
                                                            </div>
                                                            <a class="item"
                                                                click.delegate="createHtmlHandler(space, dir, child2)">
                                                                HTML
                                                            </a>
                                                            <a class="item"
                                                                click.delegate="createHandler(space, dir, child2)">
                                                                Markdown
                                                            </a>
                                                            <!-- <a class="item"
                                                                click.delegate="createExcelHandler(space, dir, child2)">
                                                                电子表格
                                                            </a> -->
                                                            <a class="item"
                                                                click.delegate="createSheetHandler(space, dir, child2)">
                                                                电子表格
                                                            </a>
                                                            <a class="item"
                                                                click.delegate="createMindHandler(space, dir, child2)">
                                                                思维导图
                                                            </a>
                                                            <div class="ui divider">
                                                            </div>
                                                            <a click.delegate="selectTplHandler(space, dir, child2)"
                                                                class="item">
                                                                基于模板
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="item" style="color: red;"
                                                        click.delegate="delBlogHandler(child2)">
                                                        <i class="trash outline icon"></i>删除博文
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div show.bind="child2.hasChild && child2._open"
                                            class="ui bulleted list tms-sortable-elem-blogs"
                                            style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                            data-id="${space.id}" data-dir-id="${dir.id}">
                                            <div repeat.for="child3 of child2._childs | sortBlog" data-id="${child3.id}"
                                                data-pid="${child3.pid}" data-has-child="${child3.hasChild}"
                                                data-sort="${child3.sort}" show.bind="!child3._hidden"
                                                class="item child3 blog-item ${child3.id == blog.id ? 'active' : ''}">
                                                <a title="${child3.title}" href="#/blog/${child3.id}">
                                                    <i class="icons" click.delegate="loadChildBlogs(child3)">
                                                        <i if.bind="!child3.hasChild" class="file outline icon"></i>
                                                        <i if.bind="child3.hasChild"
                                                            class="${child3._open ? 'minus' : 'plus'} square outline icon"></i>
                                                        <i show.bind="child3.privated" class="corner lock icon"></i>
                                                    </i>${child3.title}</a>
                                                <div class="actions">
                                                    <div
                                                        ui-dropdown class="ui right pointing dropdown">
                                                        <i class="large ellipsis horizontal icon"></i>
                                                        <div class="left menu">
                                                            <div class="item">
                                                                <i class="dropdown icon"></i>
                                                                <span class="text"
                                                                    click.delegate="createHandler(space, dir, child3)">创建博文</span>
                                                                <div class="menu">
                                                                    <div class="header">
                                                                        选择编辑器
                                                                    </div>
                                                                    <a class="item"
                                                                        click.delegate="createHtmlHandler(space, dir, child3)">
                                                                        HTML
                                                                    </a>
                                                                    <a class="item"
                                                                        click.delegate="createHandler(space, dir, child3)">
                                                                        Markdown
                                                                    </a>
                                                                    <!-- <a class="item"
                                                                        click.delegate="createExcelHandler(space, dir, child3)">
                                                                        电子表格
                                                                    </a> -->
                                                                    <a class="item"
                                                                        click.delegate="createSheetHandler(space, dir, child3)">
                                                                        电子表格
                                                                    </a>
                                                                    <a class="item"
                                                                        click.delegate="createMindHandler(space, dir, child3)">
                                                                        思维导图
                                                                    </a>
                                                                    <div class="ui divider">
                                                                    </div>
                                                                    <a click.delegate="selectTplHandler(space, dir, child3)"
                                                                        class="item">
                                                                        基于模板
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="item" style="color: red;"
                                                                click.delegate="delBlogHandler(child3)">
                                                                <i class="trash outline icon"></i>删除博文
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div show.bind="child3.hasChild && child3._open"
                                                    class="ui bulleted list tms-sortable-elem-blogs"
                                                    style="padding-left: 3px; padding-bottom: 0; padding-right: 0;"
                                                    data-id="${space.id}" data-dir-id="${dir.id}">
                                                    <div repeat.for="child4 of child3._childs | sortBlog"
                                                        data-id="${child4.id}" data-pid="${child4.pid}"
                                                        data-has-child="${child4.hasChild}" data-sort="${child4.sort}"
                                                        show.bind="!child4._hidden"
                                                        class="item child4 blog-item ${child4.id == blog.id ? 'active' : ''}">
                                                        <a title="${child4.title}" href="#/blog/${child4.id}">
                                                            <i class="icons">
                                                                <i class="file outline icon"></i>
                                                                <i show.bind="child4.privated"
                                                                    class="corner lock icon"></i>
                                                            </i>${child4.title}</a>
                                                        <div class="actions">
                                                            <div if.bind="isSuper || child4.creator.username == loginUser.username"
                                                                ui-dropdown class="ui right pointing dropdown">
                                                                <i class="large ellipsis horizontal icon"></i>
                                                                <div class="left menu">
                                                                    <div class="item" style="color: red;"
                                                                        click.delegate="delBlogHandler(child4)">
                                                                        <i class="trash outline icon"></i>删除博文
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tms-footer">
            <div class="ui icon menu">
                <em-blog-space-create></em-blog-space-create>
                <div class="item tms-search">
                    <div class="ui transparent left icon input">
                        <input ref="filterInputRef" keyup.trigger="filterKeyupHandler($event)" value.bind="filter"
                            type="text" placeholder="过滤查找...">
                        <i class="search icon"></i>
                    </div>
                    <i click.delegate="clearFilterHandler()"
                        class="remove link icon ${!filter ? 'tms-hidden' : ''}"></i>
                </div>
                <div class="right menu">
                    <em-dropdown-links></em-dropdown-links>
                </div>
            </div>
        </div>
        <div click.delegate="foldHandler()" title="隐藏侧边栏" class="ui icon circular tiny button fold"><i
                class="chevron left icon"></i></div>
        <div ref="splitRef" class="tms-split"></div>
    </div>
    <em-confirm-modal em-confirm-modal.ref="confirmMd"></em-confirm-modal>
    <em-blog-space-edit view-model.ref="spaceEditVm"></em-blog-space-edit>
    <em-blog-space-auth view-model.ref="blogSpaceAuthVm"></em-blog-space-auth>
    <em-blog-space-dir-create view-model.ref="spaceDirCreateVm"></em-blog-space-dir-create>
    <em-blog-space-dir-edit view-model.ref="spaceDirEditVm"></em-blog-space-dir-edit>
    <em-blog-space-channel-edit view-model.ref="spaceChannelEditVm"></em-blog-space-channel-edit>
    <em-blog-tpl-select view-model.ref="blogTplSelectMd"></em-blog-tpl-select>
</template>
